<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/template_head::head('sShoppingM')">

</head>
<body>

<!-- begin::preloader-->
<div th:replace="commons/layout::preloader">

</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div th:replace="commons/layout::navigation">

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

    <!-- begin::header -->
    <div th:replace="commons/layout::main_header">

    </div>
    <!-- end::header -->

    <!-- begin::main-content -->
    <div class="main-content bg-info-bright" style="background-color: #e0ffff!important;">

        <!-- begin::container -->
        <div class="container">

                <div class="p-4 p-md-5 mb-4 text-dark rounded bg-white">
                    <div class="col">
                        <h2 class="display-4 fst-italic">广西大西芹蔬菜,源产地直发，现摘现发。</h2>
                        <p class="lead my-3">据集才社区党支部书记刘新田介绍，排楼边自然村种植芹菜已有30多年的历史，品质好、产量高、效益好。
                        为了更好地帮助排楼边自然村芹菜销售，本平台的芹菜都是排楼边自然村的。（五斤起拍） </p>
                    </div>
                    <div class="col"><img src="/assets/media/image/shopping/sSH-1.jpg">
                                    <img src="/assets/media/image/shopping/sSH-2.jpg">
                    </div>

                </div>

                <div class="row mb-2">
                    <div class="col-md-6">
                        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                            <div class="col p-4 d-flex flex-column position-static bg-white">
                                <h3 class="mb-0">广西排楼农产品经销商</h3>
                                <div class="mb-1 text-muted">3年老店</div>
                                <p class="card-text mb-auto">本店主要销售水稻、芹菜、莴笋、油麻菜等排楼特色农产品。本店农产品全部都的本地种植，原产地发货。（五斤起拍）</p>
                                <a href="#" class="stretched-link">了解更多</a>
                            </div>
                            <div class="col-auto d-none d-lg-block">
                                <img src="/assets/media/image/shopping/sSH-3.jpg">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
                            <div class="col p-4 d-flex flex-column position-static bg-white">
                                <h3 class="mb-0">评论</h3>
                                <div class="mb-1 text-muted">1300条</div>
                                <p class="mb-auto">@红红娘娘：价格实惠一下子买了五斤，收到非常新鲜，好评好评好评！！！！！</p>
                                <p class="mb-auto">@粉红娘娘：做菜吃很好吃，叫人都很喜欢，收到非常新鲜，好评好评好评！！！！！</p>
                                <a href="#" class="stretched-link">展开更多</a>
                            </div>
                            <div class="col-auto d-none d-lg-block">
                                <img src="/assets/media/image/shopping/sSH-4.jpg">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row rounded bg-white">
                <div class="col"></div>
                <div class="col text-center">
                    <h4 class="mt-4">购买细则</h4>
                    <form class="needs-validation" novalidate>
                        <div class="row">
                            <div class="col-12">
                                <label for="username" class="form-label">电话号码</label>
                                <div class="input-group has-validation">
                                    <input type="text" class="form-control" id="username" placeholder="用户名" required>
                                    <div class="invalid-feedback">
                                        你的电话号码：
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <label for="email" class="form-label">收货地址</label>
                                <input type="email" class="form-control" id="email">
                                <div class="invalid-feedback">
                                    请输入你收货地址：
                                </div>
                            </div>

                            <div class="col-12">
                                <h3 class="text-danger">￥10.00元</h3>
                                </div>
                            </div>
                            <div class="row">
                                <div class="btn-group w-100 btn btn-primary btn-lg mb-4 mt-2" role="group" type="submit">
                                    <button type="button" class="btn btn-primary"></button>
                                    <button type="button" class="btn btn-primary"><a href="#modal" class="stretched-link" data-toggle="modal">立即购买</a></button>
                                    <button type="button" class="btn btn-primary"></button>
                                </div>

                                <div class="modal fade" id="modal">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3 class="modal-title text-center">购买成功提示</h3>
                                                <span class="close" data-dismiss="modal">&times;</span>
                                            </div>
                                            <div class="modal-body">
                                                <p>
                                                    您已购买本产品成功！谢谢您对助农的支持。祝您生活愉快！
                                                </p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>
                <div class="col"></div>
            </div>
        </div>
        <!-- end::container -->

    </div>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer th:replace="commons/layout::main_footer">

    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<div th:replace="commons/layout::end">

</div>

</body>
</html>
